<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用Set处理网上关键字</title>
    <style>
        li{
            width: 100px;
        }
        /* even代表的是偶数行 */
        li:nth-of-type(even){
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <input type="text" name="keyword">
    <ul></ul>
</body>
<script>
    let obj = {
        keyword:new Set(),
        // 一定要加上关键字 set
        set keywords(word){
            this.keyword.add(word)
        },
        show(){
            console.log(this.keyword)
            let ul = document.querySelector('ul')
            ul.innerHTML = ''
            this.keyword.forEach((item)=>{
                ul.innerHTML += `<li>${item}</li>`
            })
        }
    }
    // 这个就是典型的面向对象编程  这样的编程就是一个功能一个方法  高类聚低耦合
    let input = document.querySelector("[name='keyword']")
    input.addEventListener('blur',()=>{
        obj.keywords = input.value
        obj.show()
    })
</script>
</html>